import {Table, Input, Button, Popconfirm, Select, message} from 'antd';
import React from "react";
import Store from "./Store";
import {createModel} from "../../../../api/work/GenerateApi";
import {observer} from "mobx-react";

@observer
class NoTableNoModel extends React.Component {
    constructor(props) {
        super(props);
        this.columns = [
            {
                title: '字段',
                dataIndex: 'field',
                editable: true,
                width: '25%',
                render: (text,record) => {
                    return <Input allowClear defaultValue={text} onChange={(e) => this.handleFieldChange(record.key,e.target.value,"field")} placeholder="填写字段名称" />
                }
            },
            {
                title: '注释',
                dataIndex: 'description',
                editable: true,
                width: '25%',
                render: (text,record) => {
                    return <Input allowClear defaultValue={text} onChange={(e) => this.handleFieldChange(record.key,e.target.value,"description")} placeholder="填写字段注释" />
                }
            },
            {
                title: '数据类型',
                dataIndex: 'type',
                editable: true,
                width: '25%',
                render: (text, record) => {
                    const { Option } = Select;
                    return <Select
                        onChange={(value) => {this.handleFieldChange(record.key,value,"type")}}
                        style={{width:"153px"}}
                        defaultValue={text ? text : "varchar"}
                        optionFilterProp="children"
                    >
                        <Option value="varchar">字符串</Option>
                        <Option value="int">数字</Option>
                    </Select>
                }
            },
            {
                title: '操作',
                dataIndex: 'operation',
                width: '25%',
                render: (text, record) =>
                    Store.modalData.length >= 1 ? (
                        <Popconfirm title="确定要删除该行?" onConfirm={() => this.handleDelete(record.key)}>
                            <Button type={"link"}>删除</Button>
                        </Popconfirm>
                    ) : null,
            },
        ];
    }

    addRow = () => {
        let data = Store.modalDataMap;
        console.log("count:",Store.count)
        data[Store.count] = {
            key:Store.count,
            field:"",
            description:"",
            type:""
        };
        Store.modalData = Object.values(data);
        Store.count = Store.count + 1;
    };

    handleDelete = (key) => {
        delete Store.modalDataMap[key];
        Store.modalData = Object.values(Store.modalDataMap);
    };

    handleFieldChange = (key,value,field) => {
        Store.modalDataMap[key][field] = value;
    };

    /**
     * 生成模型
     */
    generateModel = () => {
        let data = Object.values(Store.modalDataMap);
        console.log(data);
        let is_ok = true;
        for (let index in data){
            if (data[index]["field"].length === 0){
                message.error("字段不能为空");
                is_ok = false;
                break;
            }
            if (data[index]["description"].length === 0){
                message.error("描述不能为空");
                is_ok = false;
                break;
            }
        }

       if (is_ok){
           createModel({"page":Store.pageRoute,"config":JSON.stringify(data),"type":Store.CONFIG_TYPE}).then(response => {
               Store.resultVisible = true;
               Store.title = response.data.msg;
               Store.processList = response.data.processList;
               Store.status = response.data.isSuccess ?  "success" : "error";
               Store.modelInfo = response.data.modelInfo ? response.data.modelInfo : [];
           });
       }
    };

    render() {
        return (
            <div>
                <Button onClick={this.addRow} icon={"plus"} type="primary" style={{ marginBottom: 16 }}>
                    增加一行
                </Button>
                <Button onClick={this.generateModel} icon={"play-circle"} type="danger" style={{ marginBottom: 16 ,marginLeft:16}}>
                   生成模型
                </Button>
                <Table
                    bordered
                    dataSource={Store.modalData}
                    columns={this.columns}
                    pagination={false}
                />
            </div>
        );
    }
}

export default NoTableNoModel;
